<template>
  <div>
    <div class="lg:gap-10 flex flex-col gap-5 mx-auto max-w-7xl">
      <div class="lg:px-0 flex gap-2 justify-between items-center px-4 py-4">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="flex items-center">
          <el-breadcrumb-item class="flex items-center" :to="{ path: localePath('/') }">
            <div class="flex items-center">
              <i class="el-icon-s-home mr-1 text-lg"></i>
            </div>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="flex items-center capitalize whitespace-nowrap" :to="{ path: localePath('/game') }">
            {{ $t('pages.gamelist') }}
          </el-breadcrumb-item>
          <el-breadcrumb-item class="">
            <p class="capitalize">
              {{ names?.name }}
            </p>
          </el-breadcrumb-item>
          <!-- <el-breadcrumb-item>{{ name }}</el-breadcrumb-item> -->
        </el-breadcrumb>
        <div class="lg:hidden">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 cursor-pointer" @click="showDialog = true">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </div>
      <div class="lg:px-0 grid grid-cols-4 gap-12 px-4">
        <div class="lg:flex hidden flex-col col-span-1 gap-4">
          <!-- 游戏平台 -->
          <!-- 游戏平台 -->
          <!-- 游戏平台 -->
          <LazyClassifyGame :showActive="false" :classify="classify" :activeId="tabId" />
        </div>
        <div class="lg:col-span-3 flex flex-col col-span-4 gap-4">
          <!-- 全部游戏 -->
          <!-- 全部游戏 -->
          <!-- 全部游戏 -->
          <h2 class="font-medium text-[1.25rem] text-[#121212]">{{ names?.name }}</h2>
          <div class="lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-3 lg:gap-9 grid grid-cols-2 gap-4">
            <nuxt-link
              v-for="item in gameList"
              :key="item.id"
              :to="localePath(`/game/${item.code}`)"
              class="group flex flex-col gap-1 cursor-pointer"
            >
              <div class="rounded-[0.75rem] w-full aspect-[8/11] overflow-hidden border">
                <img
                  :src="$globalFn.imgPrefixUrl(item.image || '', 'goods_thumb_3_4')"
                  :title="`${item.title} - Game cover`"
                  :alt="`${item.title} - Game thumbnail`"
                  loading="lazy"
                  class="size-full group-hover:scale-110 bg-gray-200 duration-300"
                />
              </div>
              <span class="font-medium text-[0.75rem] text-[#121212] line-clamp-2">
                {{ item.title }}
              </span>
              <p class="font-normal text-[0.75rem] text-[#666666]">
                {{ item.region.name || '' }}
              </p>
            </nuxt-link>
          </div>
          <Paging :total="total" :page.sync="page" :limit.sync="size" @change="handlePageChange" :current-query="$route.query"> </Paging>

          <no-data v-if="gameList.length == 0" :loading="loading"></no-data>
        </div>
      </div>
    </div>
    <LazyH5Dialog :showDialog="showDialog" :title="$t('pages.classification')">
      <LazyClassifyGame :showActive="false" :classify="classify" />
    </LazyH5Dialog>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'gamePlatform',
    key(route) {
      return route.fullPath
    },
    head() {
      return {
        title: this.goods_category.seo_title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.goods_category.seo_description
          }
        ]
      }
    },
    data() {
      return {
        tabId: '', // 当前选中的分类ID
        tabCode: '', // 当前选中的分类代码
        page: 1, // 当前页码
        size: 20, // 每页显示数量
        total: 0, // 商品总数
        gameList: [], // 游戏列表数据
        loading: true, // 加载状态
        showDialog: false, // 分类弹窗显示状态
        names: {}, // 当前分类信息对象
        goods_category: {}
      }
    },
    async asyncData({ app, params, query }) {
      // 并发请求获取分类、游戏列表和热门游戏数据
      const [data, goods_category] = await Promise.all([
        app.$axios.get('/api/goods_category/index', {
          params: {
            type: 0,
            cate_code: params.code
          }
        }),
        app.$axios.get('/api/goods_category/read', {
          params: {
            code: params.code
          }
        })
      ])
      let obj = data._child.find(item => item.code == params.code)

      return {
        classify: data,
        tabId: obj.id,
        names: obj,
        tabCode: params.code,
        goods_category,
        page: query.page || 1
      }
    },
    created() {
      if (process.server) return
      this.page = this.$route.query.page || 1
      this.getGameList()
    },
    methods: {
      async handlePageChange({ page, currentQuery }) {
        this.loading = true
        this.page = currentQuery || page
        const newQuery = { ...this.$route.query, page: page }
        const newPath = this.$route.path + '?' + new URLSearchParams(newQuery).toString()
        window.history.replaceState({}, '', newPath)
        await this.getGameList()
      },
      async getGameList() {
        let params = {
          cate_code: this.tabCode,
          page: this.page,
          limit: this.size,
          paginate: 1
        }
        let res = await this.$axios.get(`/api/game/index?${new URLSearchParams(params).toString()}`)
        this.gameList = res.data
        this.total = res.total
      },
      // changeTab(item) {
      //   this.$router.push({
      //     path: this.localePath(`/game/platform/${item.id}`),
      //   });
      // },
      gameDetail(item) {
        let p = this.localePath(`/game/${item.code}`)
        return p
      }
    }
  }
</script>
